<template>
  <div class="app-container">
    <!--药品查询条件开始 -->
    <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="68px"
    >
      <el-form-item label="药品名称" prop="medicinesName">
        <el-input
            v-model="queryParams.data.medicinesName"
            placeholder="请输入药品名称"
            clearable
            size="small"
            style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="关键字" prop="keywords">
        <el-input
            v-model="queryParams.data.keywords"
            placeholder="请输入关键字"
            clearable
            size="small"
            style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="药品类型" prop="medicinesType">
        <el-select
            v-model="queryParams.data.medicinesType"
            placeholder="药品类型"
            clearable
            size="small"
            style="width: 180px">
          <el-option
              v-for="dict in medicinesTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"/>
        </el-select>
      </el-form-item>
      <el-form-item label="生产厂家" prop="producterId">
        <el-select
            v-model="queryParams.data.producterId"
            placeholder="生产厂家"
            clearable
            size="small"
            style="width: 180px">

          <el-option v-for="b in producterOptions"
                     :label="b.producerName"
                     :value="b.producerId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="处方类型" prop="prescriptionType">
        <el-select
            v-model="queryParams.data.prescriptionType"
            placeholder="处方类型"
            clearable
            size="small"
            style="width: 180px"
        >
          <el-option
              v-for="dict in prescriptionTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="queryParams.data.status"
            placeholder="可用状态"
            clearable
            size="small"
            style="width: 180px">
          <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="showAdd">添加</el-button>
      </el-form-item>

    </el-form>
    <!-- 查询条件结束 -->

    <!--    主表格-->
    <el-table
        :data="medicinesTableList">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="单位">
              <span>{{ props.row.unit }}</span>
            </el-form-item>
            <el-form-item label="换算量">
              <span>{{ props.row.conversion }}</span>
            </el-form-item>
            <el-form-item label="库存量">
              <span>{{ props.row.medicinesStockNum }}</span>
            </el-form-item>
            <el-form-item label="预警值">
              <span>{{ props.row.medicinesStockDangerNum }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="药品ID" align="center" prop="medicinesId"/>
      <el-table-column label="药品名称" align="center" prop="medicinesName"/>
      <el-table-column label="药品编号" align="center" prop="medicinesNumber"/>
      <!-- :formatter="producterFormatter"-->
      <el-table-column
          label="生产厂家"
          width="150px"
          align="center"
          prop="producerName"/>
      <!--:formatter="producterName"-->
      <el-table-column
          label="药品类型"

          align="center"
          prop="typeName"/>
      <el-table-column
          label="处方类型"
          align="center"
          prop="priceName"/>
      <!--如果是 statusName 正常，显示绿色的正常按钮-->
      <el-table-column
          label="状态"
          align="center"
          prop="statusName"/>
      <el-table-column
          label="关键字"
          align="center"
          prop="keywords"/>
      <el-table-column
          label="处方价格"
          align="center"
          prop="prescriptionPrice"/>
      <!---->

      <el-table-column label="操作" width="280px" align="center">
        <template v-slot="{row}">
          <el-button
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="showEdit(row)">修改
          </el-button>
          <el-button
              type="text"
              icon="el-icon-delete"
              size="mini"
              @click="deleteE(row)">删除
          </el-button>
          <el-button
              type="text"
              icon="el-icon-plus"
              size="mini"
              @click="handleUpdateStorage(row)">
            调整库存
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页  -->
    <el-pagination
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>


    <!--    编辑-->
    <el-dialog title="药品信息" @close="employeeData = {}" :visible.sync="dialogFormVisible">
      <el-form ref="employeeData" :model="employeeData" label-width="80px" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="药品名称" prop="medicinesName">
              <el-input
                  v-model="employeeData.medicinesName"
                  style="width: 240px"
                  placeholder="请输入药品名称"
                  clearable
                  size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="药品编码" prop="medicinesNumber">
              <el-input
                  v-model="employeeData.medicinesNumber"
                  style="width: 240px"
                  placeholder="请输入药品编码"
                  clearable
                  size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="关键字" prop="keywords">
              <el-input
                  v-model="employeeData.keywords"
                  style="width: 240px"
                  placeholder="请输入关键字"
                  clearable
                  size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input
                  v-model="employeeData.unit"
                  style="width: 240px"
                  placeholder="请输入单位"
                  clearable
                  size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="换算量" prop="conversion">
              <el-input-number
                  v-model="employeeData.conversion"
                  style="width: 240px"
                  placeholder="请输入换算量"
                  clearable
                  size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处方价格" prop="prescriptionPrice">
              <el-input-number
                  v-model="employeeData.prescriptionPrice"
                  style="width: 240px"
                  placeholder="请输入处方价格"
                  size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预警值" prop="medicinesStockDangerNum">
              <el-input-number
                  v-model="employeeData.medicinesStockDangerNum"
                  style="width: 240px"
                  placeholder="请输入预警值"
                  size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="employeeData.status" style="width: 240px">
                <el-radio
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                    :value="dict.dictValue"
                >{{ dict.dictLabel }}
                </el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="药品类型" prop="medicinesType">
              <el-select
                  v-model="employeeData.medicinesType"
                  style="width: 240px"
                  placeholder="药品类型"
                  size="small">
                <el-option
                    v-for="b in medicinesTypeOptions"
                    :label="b.dictLabel"
                    :value="b.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处方类型" prop="prescriptionType">
              <el-select
                  v-model="employeeData.prescriptionType"
                  style="width: 240px"
                  placeholder="处方类型"
                  size="small">
                <el-option
                    v-for="dict in prescriptionTypeOptions"
                    :label="dict.dictLabel"
                    :value="dict.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产厂家" prop="producterId">
              <el-select
                  v-model="employeeData.producterId"
                  placeholder="生产厂家">
                <el-option
                    v-for="b in producterOptions"
                    :label="b.producerName"
                    :value="b.producerId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="saveSubmit('employeeData')">
            {{ employeeData.id ? '修改' : '保存' }}
          </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 状态
      statusOptions: [],
      //   药品类型
      medicinesTypeOptions: [],
      //   生产厂家
      producterOptions: [],
      //   处方类型
      prescriptionTypeOptions: [],

      //表格
      medicinesTableList: [],

      // 分页查询表单 查询条件
      queryParams: {
        pageNo: undefined,
        //每页的大小
        pageSize: undefined,
        data: {},
        /*medicinesName: undefined,
        medicinesType: undefined,
        prescriptionType: undefined,
        producterId: undefined,
        status: undefined,
        keywords: undefined*/
      },
      pageNo: 1,
      //每页的大小
      pageSize: 5,
      total: 0,

      queryForm: [],

      // 编辑添加表单
      employeeData: {},
      dialogFormVisible: false,


      // 表单校验
      rules: {
        medicinesName: [
          {required: true, message: "药品名称不能为空", trigger: "blur"},
        ],
        keywords: [
          {required: true, message: "查询关键字不能为空", trigger: "blur"},
        ],
        prescriptionPrice: [
          {required: true, message: "处方价格不能为空", trigger: "blur"},
        ],
        medicinesStockDangerNum: [
          {required: true, message: "预警值不能为空", trigger: "blur"},
        ],
        medicinesType: [
          {required: true, message: "药品类型不能为空", trigger: "blur"},
        ],
        prescriptionType: [
          {required: true, message: "处方类型不能为空", trigger: "blur"},
        ],
        producterId: [
          {required: true, message: "生产厂家不能为空", trigger: "blur"},
        ],
        conversion: [
          {
            required: true,
            message: "换算量不能为空",
            trigger: "blur",
          },
        ],
      },

    }

  },
  created() {
    this.loadTable()
    //查询状态
    this.$http.get("/dictData/queryByDictType?dictType=" + 'sys_normal_disable').then(result => {
      this.statusOptions = result.data;
    })

    //生产厂家
    this.$http.get("/producer/getAll").then(result => {
      this.producterOptions = result.data.data.data;
      console.log(this.producterOptions)
    })

    //药品类
    this.$http.get("/dictData/queryByDictType?dictType=" + 'his_medicines_type').then(result => {
      // console.log(result)
      this.medicinesTypeOptions = result.data;
    })

    //处方类
    this.$http.get("/dictData/queryByDictType?dictType=" + 'his_prescription_type').then(result => {
      this.prescriptionTypeOptions = result.data;
    })

  },


  methods: {

    // 查询全部：
    loadTable() {
      // this.loading = true; // 打开遮罩
      this.queryParams.pageNo = this.pageNo;
      this.queryParams.pageSize = this.pageSize;
      this.$http.post("/medicines/queryByPage", this.queryParams).then(res => {
        console.log(res)
        this.medicinesTableList = res.data.data.list;
        // console.log(this.medicinesTableList)
        this.total = res.data.data.total;
      })
    },

    // 编辑 数据回显
    showEdit(row) {
      return this.$http.get("/medicines/queryById?id=" + row.medicinesId).then(result => {
        // console.log(result.data)
        this.employeeData = result.data.data;
        this.employeeData.rid = Number(this.employeeData.rid);
        this.dialogFormVisible = true;
      })
    },
    // 删除
    deleteE(row) {
      this.$http.delete("/medicines//deleteById?id=" + row.medicinesId).then(result => {
        if (result.data != null) {
          this.loadTable();
        } else {
          alert("删除失败");
        }
      })
    },


    // 添加
    showAdd() {
      this.dialogFormVisible = true;
    },
    // 确认修改和保存
    // 保存提交
    async saveSubmit(formName) {
      // console.log(this.employeeData)
      try {
        await this.$refs[formName].validate();
        const empData = await this.$http.post("/medicines/add", this.employeeData);
        await this.loadTable();
        this.$message.success("操作成功");
        this.dialogFormVisible = false;
      } catch (error) {
        this.$message.error("操作失败：" + error.message);
      }
    },



    //调整库存
    handleUpdateStorage(row) {
      console.log(row)
      const tx = this;
      tx.$prompt("请输入要调整[" + row.medicinesName + "]的值", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^-?\d+$/,
        inputErrorMessage: "库存值输入不正确",
      })
          .then(({value}) => {
            this.$http.post("/medicines/updateaMedicinesStockNum/" + row.medicinesId + "/" + value)
                .then((res) => {
                  tx.$message.success("调整成功");
                  tx.loadTable(); // 重新查询数据
                })
                .catch(() => {
                  tx.$message.error("调整失败");
                });
          })
          .catch(() => {
            tx.$message.error("调整取消");
          });
    },

    //翻译生产厂家
    producterFormatter(row) {
      let name = "";
      this.producterOptions.filter((item) => {
        if (parseInt(item.producerId) === parseInt(row.producterId)) {
          name = item.producerName;
        }
      });
      return name;
    },


    // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新查询
      this.loadTable();
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.pageNo = val;
      // 重新查询
      this.loadTable();
    },

    // 条件查询
    handleQuery() {
      this.loadTable();
    },
    // 重置查询条件
    resetQuery() {
      // this.queryParams = {};
      // this.loadTable();
      //页面刷新
      location.reload();
    },


  }
}
</script>

<style scoped>

</style>